<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/css/看板/style.css">
    <script src="src/js/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="src/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="src/js/天气.js"></script>
    <link rel="stylesheet" href="src/css/天气.css">
    <link rel="stylesheet" href="src/css/表格/表格.css">
    <link href="src/css/看板/css.css" rel="stylesheet" type="text/css" media="all"/>
    <title>牛客周赛大数据展示</title>
    <style>
        .yidong_block {
            display: none;
            width: 0;
            height: 0;
        }

        @media screen and (max-aspect-ratio: 1/1) {
            .yidong_none {
                display: none;
            }

            #myTable {
                display: none;
                width: 0;
                height: 0;
            }

            #myTable_yidong {
                display: block;
                width: 100%;
                height: 100%;
            }

            #left1, #left2 {
                display: none;
            }

            #center {
                position: absolute;
                top: 100px;
                left: 0;
                height: 80%;
                width: 100%;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            #center-main {
                position: absolute;
                left: 20px;
                right: 20px;
                top: 0;
                bottom: 0;
                width: auto;
            }

            #center1, #center2 {
                left: 0;
                right: 0;
                bottom: 0;
            }

            #center1 {
                width: auto;
                height: 40%;
            }

            #center2 {
                top: 30%;
                height: auto;
                width: auto;
            }

            #right1 {
                display: none;
                right: 0;
                width: 0;
            }

            #right2 {
                top: 95%;
                text-align: center;
                width: 90%;
                height: 40%;
                left: 5%;
                right: 5%;
            }

            #right3 {
                top: 140%;
                text-align: center;
                width: 90%;
                height: 40%;
                left: 5%;
                right: 5%;
            }

            #left3{
                top: 185%;
                text-align: center;
                width: 90%;
                height: 40%;
                left: 5%;
                right: 5%;
            }
        }
    </style>

</head>

<body style="overflow: auto;" class="fill-parent" dg-chart-auto-resize="true"
      dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
      dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#142233'}">
<div class="head">
    <div class="title"><label>牛客周赛 Round </label></div>
</div>
<div class="content">
    <div class="layout layout-left-top" id="left1">
        <div class="panel panel-bg no-title-bg">
            <div class="title"><label>本日天气</label></div>
            <div class="weather-box" style="width: 100%; height: 95%">
                <div class="data" style="transform: scale(5);">
                    <p class="time" id="time">14:32:51</p>
                    <p id="date"><span>2024/11/7</span><span>pm</span><span>周4</span></p>
                </div>
                <div class="weather" style="transform: scale(5);">
                    <img id="weatherImg" src="src/imges/weather/weather_img01.png" alt="">
                    <div id="weather">
                        <p class="active">多云</p>
                        <p>16-22℃</p>
                        <p>河池市宜州区</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layout layout-left-center" id="left2">
        <div class="panel">
            <div class="title"><label>本周题目分数分布情况</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxbott" class="purightboxbottcont" style="width: 90% ; height: 95%"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-left-bottom" id="left3">
        <div class="panel">
            <div class="title"><label>双周提交对比</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="pumiddboxtbott1" class="fl pumiddboxtbott1cont"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-center" id="center">
        <div class="layout layout-center-main" id="center-main">
            <div class="layout layout-center-top" id="center1">
                <div id="chart_1" class="chart" style="width:auto;height: 100%;"></div>
            </div>
            <div class="layout layout-center-bottom" id="center2">
                <div class="panel no-title-bg" style="width: auto;height: auto">
                    <div class="title" style="width: auto;height: auto"><label>本周总览 </label><a
                            href="src/Excel/niu.xlsx"
                            download
                            style="color: #cce198"><span
                            style="font-size: 11px">⇒表格下载 EX to Table</span></a>
                    </div>
                    <div class="chart" dg-chart-widget="" style="width: auto;height: auto">
                        <div class="right_cage" style="float: left; width: 100%;height: 100%;" id="gundongtiao">
                            <div class="dataAllBorder01 cage_cl check_increase"
                                 style="width: 100%;height: 100%; margin-top: 1.5% !important;">
                                <div class="yidong_none dataAllBorder02 over_hide dataAllBorder20"
                                     style="width: 100%;height: 30px">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr style="background: rgb(3 30 113)">
                                            <th style="width: 4%">排</th>
                                            <th style="width: 11%">班级</th>
                                            <th style="width: 9%">姓名</th>
                                            <th class="yidong_none" style="width: auto">牛客名称</th>
                                            <th class="yidong_none" style="width: 10%">牛客 id</th>
                                            <th class="yidong_none" style="width: 7%">名次</th>
                                            <th class="yidong_none" style="width: 10%">学校</th>
                                            <th style="width: 5%">AC</th>
                                            <th style="width: 7%">总分</th>
                                            <th class="yidong_none" style="width: 12%">时间</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 100%"
                                     id="over_hide">
                                    <table class="yidong_none table table-bordered" id="myTable"
                                           style="width: 100%"></table>
                                    <table class="yidong_block table table-bordered" id="myTable_yidong"
                                           style="width: 100%;font-size: 60px"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-top" id="right1">
        <div class="panel">
            <div class="title"><label>本周提交分布玫瑰图</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxtop" class="purightboxtopcont right_tu"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-center" id="right2">
        <div class="panel">
            <div class="title"><label>近期参与人数</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div id="purightboxmidd" class="purightboxmiddcont right_tu"></div>
            </div>
        </div>
    </div>
    <div class="layout layout-right-bottom" id="right3">
        <div class="panel">
            <div class="title"><label>上周成绩比较</label></div>
            <div class="chart wu_biao" dg-chart-widget="">
                <div class="right_cage" style="float: left; width: 100%;height: 100%;" id="gundongtiao_ringht">
                    <div class="dataAllBorder01 cage_cl check_increase"
                         style="width: 100%;height: 100%; margin-top: 1.5% !important;">
                        <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 10%">
                            <table class="table table-bordered">
                                <tr style="background: rgb(3 30 113)">
                                    <th style="width: 8%">排</th>
                                    <th style="width: 8%">dp</th>
                                    <th style="width: 25%">班级</th>
                                    <th style="width: 20%">姓名</th>
                                    <th style="width: auto">总分</th>
                                    <th style="width: 20%">时间</th>
                                </tr>
                            </table>
                        </div>
                        <div class="dataAllBorder02 over_hide dataAllBorder20" style="width: 100%;height: 80%"
                             id="over_hide_right">
                            <table class="table table-bordered" id="myTable2"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!--数据*/*/*/*￥#&1--><!--
<script type="text/javascript">
    const num= 73;
    const left2= [{value:220.00,name: 'A'},
        {value:115.00,name: 'B'},
        {value:0.00,name: 'C'},
        {value:10.00,name: 'D'},
        {value:23.81,name: 'E'},
        {value:9.09,name: 'F'},
        {value:0.00,name: 'G'}];
    const left3_data1= ['12','5','3','1','0','0','0'];
    const left3_data2= ['5','3','1','1','1','1','0'];
    const left3_data3= ['-7','-2','-2','0','1','1','0'];
    const center1= [
        {value: 220.00,name:'A',itemStyle: {normal: {color:'#f845f1'}}},
        {value: 115.00,name:'B',itemStyle: {normal: {color:'#ad46f3'}}},
        {value: 0.00,name:'C',itemStyle: {normal: {color:'#5045f6'}}},
        {value: 10.00,name:'D',itemStyle: {normal: {color:'#4777f5'}}},
        {value: 23.81,name:'E',itemStyle: {normal: {color:'#44aff0'}}},
        {value: 9.09,name:'F',itemStyle: {normal: {color:'#45dbf7'}}},
        {value: 0.00,name:'G',itemStyle: {normal: {color:'#f6d54a'}}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}},
        {value: 0.0,name:'',itemStyle: {normal: {color:'transparent'}},label: {show: false},labelLine: {show: false}}];
    const center2= [
        ['1','计技222','吴玉海','吴玉海','206578392','586','河池学院','2','192.90','00:41:02'],
        ['2','软件231','陈礼孝','莱因赖因','619768191','997','河池学院','1','65','00:57:30'],
        ['3','软件222','黎珊珊','彩塘','542981108','1053','河池学院','1','50','00:11:08'],
        ['4','计技中221','卢永华','阳光as','445291084','1053','河池学院','1','50','01:57:37'],
        ['5',' 计技 231',' 吴鹃芳 ','zxcvbnm678','466478601','1140','河池学院','0','20','01:11:42']
    ];
    const right1= [
        {value: 5,name: 'A'},
        {value: 3,name: 'B'},
        {value: 1,name: 'C'},
        {value: 1,name: 'D'},
        {value: 1,name: 'E'},
        {value: 1,name: 'F'},
        {value: 0,name: 'G'}];
    const right2_data1= ['67周','68周','69周','70周','71周','72周','73周'];
    const right2_data2= [23,31,28,29,12,12,5];
    const right3= [
        ['1','⌀','软件232','邱帥銘','185','01:47:21'],
        ['2','⇩','软件222','黎珊珊','180','01:42:18'],
        ['3','⌀','计技222','李佳蔚','180','01:54:59'],
        ['4','⌀','计技中221','农鑫盛','150','01:40:07'],
        ['5','⌀','计技222','杨思婷','145','01:30:37'],
        ['6','⌀','计技中221','陆明锐','50','00:38:01'],
        ['7','⌀',' 软件 231',' 罗茸丹 ','50','01:07:39'],
        ['8','⇪','计技中221','卢永华','50','01:29:24'],
        ['9','⌀','技计中221','罗志斌','50','01:55:54'],
        ['10','⌀','计技中221','吴成锫','50','01:56:55'],
        ['11','⌀',' 软件 242',' 桂瑞杰 ','25','00:48:37'],
        ['12','⇪',' 计技 231',' 吴鹃芳 ','10','01:57:41']
    ];
</script>-->
<script type="text/javascript">
    const num = 70;
    const left2 = [{value: 1370.00, name: 'A'},
        {value: 1482.50, name: 'B'},
        {value: 800.00, name: 'C'},
        {value: 75.03, name: 'D'},
        {value: 666.67, name: 'E'},
        {value: 16.67, name: 'F'},
        {value: 0.00, name: 'G'}];
    const left3_data1 = ['28', '23', '7', '6', '6', '1', '0'];
    const left3_data2 = ['29', '22', '12', '8', '4', '2', '1'];
    const left3_data3 = ['1', '-1', '5', '2', '-2', '1', '1'];
    const center1 = [
        {value: 1370.00, name: 'A', itemStyle: {normal: {color: '#f845f1'}}},
        {value: 1482.50, name: 'B', itemStyle: {normal: {color: '#ad46f3'}}},
        {value: 800.00, name: 'C', itemStyle: {normal: {color: '#5045f6'}}},
        {value: 75.03, name: 'D', itemStyle: {normal: {color: '#4777f5'}}},
        {value: 666.67, name: 'E', itemStyle: {normal: {color: '#44aff0'}}},
        {value: 16.67, name: 'F', itemStyle: {normal: {color: '#45dbf7'}}},
        {value: 0.00, name: 'G', itemStyle: {normal: {color: '#f6d54a'}}},
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        },
        {
            value: 0.0,
            name: '',
            itemStyle: {normal: {color: 'transparent'}},
            label: {show: false},
            labelLine: {show: false}
        }];
    const center2 = [
        ['1', '计技231', '农阳晨', 'Maou逍遥', '742060430', '379', '河池学院', '4', '451.05', '01:48:37'],
        ['2', '软件232', '邱帥銘', 'Mousennnn', '400320297', '402', '河池学院', '4', '434.38', '01:57:36'],
        ['3', '软件232', '潘昊', '潘昊ph', '457352654', '519', '河池学院', '3', '325', '01:46:28'],
        ['4', '计技222', '吴玉海', '吴玉海', '206578392', '553', '河池学院', '3', '301.05', '01:26:55'],
        ['5', '计技222', '莫树生', 'mac落暮', '522449800', '850', '河池学院', '3', '225', '01:00:33'],
        ['6', '计技231', '石才尚', '石才尚', '748938516', '850', '河池学院', '3', '225', '01:04:54'],
        ['7', '计技222', '李佳蔚', 'diligent的懒羊羊', '222917009', '850', '河池学院', '3', '225', '01:32:47'],
        ['8', '计技222', '杨思婷', 'yy耶斯', '703497972', '850', '河池学院', '3', '225', '01:32:59'],
        ['9', '软件222', '黎珊珊', '彩塘', '542981108', '850', '河池学院', '3', '225', '01:34:38'],
        ['10', '计技232', '莫光勋', 'fun_sun', '95434155', '1020', '河池学院', '2', '153.13', '01:53:03'],
        ['11', '软件231', '赵俊锋', '锋front', '408232396', '1058', '河池学院', '2', '134.38', '01:54:12'],
        ['12', ' 计技 231', ' 雷世维 ', '雷世维', '911030757', '1108', '河池学院', '2', '129.69', '01:51:53'],
        ['13', ' 软件 231', ' 罗茸丹 ', '罗茸丹', '828180478', '1108', '河池学院', '2', '129.69', '01:54:48'],
        ['14', ' 计技中 221', ' 谢业棋 ', '小新_同学', '697120350', '1119', '河池学院', '2', '125', '00:24:03'],
        ['15', '软件231', '李文慧', 'mycayy', '956189792', '1119', '河池学院', '2', '125', '00:24:42'],
        ['16', '软件231', '陈礼孝', '莱因赖因', '619768191', '1119', '河池学院', '2', '125', '00:31:44'],
        ['17', '计技中221', '农鑫盛', '星蓝冲冲冲', '575408498', '1119', '河池学院', '2', '125', '00:37:49'],
        ['18', '软件231', '黄小慧', '小洄', '146798796', '1119', '河池学院', '2', '125', '01:12:30'],
        ['19', '软件231', '梁丽媛', 'LLY_k', '756515007', '1119', '河池学院', '2', '125', '01:13:38'],
        ['20', '计技231', '杨孙贤', '杨孙贤', '517552178', '1489', '河池学院', '1', '72.50', '00:41:10'],
        ['21', '计技中221', '卢永华', '阳光as', '445291084', '1489', '河池学院', '1', '72.50', '01:34:51'],
        ['22', '软件231', '蓝如意', '蓝Lan123意', '675566616', '1516', '河池学院', '1', '62.50', '01:00:09'],
        ['23', ' 软件 242', ' 桂瑞杰 ', 'Jerry1__', '690762843', '1520', '河池学院', '1', '50', '00:27:15'],
        ['24', ' 软件 231', ' 宁馨怡 ', '暮辞间', '407734837', '1520', '河池学院', '1', '50', '01:12:22'],
        ['25', '技计中221', '罗志斌', 'Riven99', '48876146', '1520', '河池学院', '1', '50', '01:50:04'],
        ['26', '大数据232', '王恩婷', '云沫wet', '842682522', '1520', '河池学院', '1', '50', '01:55:33'],
        ['27', '计技中221', '陆明锐', '瓦工读后感', '706480812', '1520', '河池学院', '1', '50', '01:57:25'],
        ['28', '计技222', '谢伟鹏', '胡图图写编程', '341966389', '1604', '河池学院', '0', '20', '01:26:51'],
        ['29', ' 软件 242', ' 唐博鸿 ', '鸿翔', '587590858', '1615', '河池学院', '0', '0', '00:00:00']
    ];
    const center2_yidong = [
        ['1', '计技231', '农阳晨', '4', '451.05'],
        ['2', '软件232', '邱帥銘', '4', '434.38'],
        ['3', '软件232', '潘昊', '3', '325'],
        ['4', '计技222', '吴玉海', '3', '301.05'],
        ['5', '计技222', '莫树生', '3', '225'],
        ['6', '计技231', '石才尚', '3', '225'],
        ['7', '计技222', '李佳蔚', '3', '225'],
        ['8', '计技222', '杨思婷', '3', '225'],
        ['9', '软件222', '黎珊珊', '3', '225'],
        ['10', '计技232', '莫光勋', '2', '153.13'],
        ['11', '软件231', '赵俊锋', '2', '134.38'],
        ['12', ' 计技 231', ' 雷世维 ', '2', '129.69'],
        ['13', ' 软件 231', ' 罗茸丹 ', '2', '129.69'],
        ['14', ' 计技中 221', ' 谢业棋 ', '2', '125'],
        ['15', '软件231', '李文慧', '2', '125'],
        ['16', '软件231', '陈礼孝', '2', '125'],
        ['17', '计技中221', '农鑫盛', '2', '125'],
        ['18', '软件231', '黄小慧', '2', '125'],
        ['19', '软件231', '梁丽媛', '2', '125'],
        ['20', '计技231', '杨孙贤', '1', '72.50'],
        ['21', '计技中221', '卢永华', '1', '72.50'],
        ['22', '软件231', '蓝如意', '1', '62.50'],
        ['23', ' 软件 242', ' 桂瑞杰 ', '1', '50'],
        ['24', ' 软件 231', ' 宁馨怡 ', '1', '50'],
        ['25', '技计中221', '罗志斌', '1', '50'],
        ['26', '大数据232', '王恩婷', '1', '50'],
        ['27', '计技中221', '陆明锐', '1', '50'],
        ['28', '计技222', '谢伟鹏', '0', '20'],
        ['29', ' 软件 242', ' 唐博鸿 ', '0', '0']
    ];
    const right1 = [
        {value: 29, name: 'A'},
        {value: 22, name: 'B'},
        {value: 12, name: 'C'},
        {value: 8, name: 'D'},
        {value: 4, name: 'E'},
        {value: 2, name: 'F'},
        {value: 1, name: 'G'}];
    const right2_data1 = ['64周', '65周', '66周', '67周', '68周', '69周', '70周'];
    const right2_data2 = [21, 24, 26, 23, 31, 28, 29];
    const right3 = [
        ['1', '⇩', '计技222', '吴玉海', '697.91', '01:22:32'],
        ['2', '⇩', '计技222', '莫树生', '637.27', '01:51:22'],
        ['3', '⊜', '软件232', '潘昊', '479.55', '01:55:54'],
        ['4', '⌀', '计技232', '卢春志', '343.64', '01:25:12'],
        ['5', '⇪', '计技231', '农阳晨', '311', '01:13:39'],
        ['6', '⇪', '软件232', '邱帥銘', '275', '01:55:24'],
        ['7', '⇩', '软件231', '赵俊锋', '147.73', '01:11:38'],
        ['8', '⊜', '计技222', '杨思婷', '125', '00:09:28'],
        ['9', '⊜', '软件222', '黎珊珊', '125', '00:28:41'],
        ['10', '⇩', ' 计技中 221', ' 谢业棋 ', '125', '00:31:33'],
        ['11', '⇪', '计技222', '李佳蔚', '125', '00:44:58'],
        ['12', '⇩', '计技中221', '农鑫盛', '125', '01:28:46'],
        ['13', '⌀', '计技中222', '覃健庭', '125', '01:57:13'],
        ['14', '⇩', '计技222', '谢伟鹏', '87.50', '00:40:02'],
        ['15', '⇪', '计技231', '石才尚', '87.50', '00:44:01'],
        ['16', '⊜', '软件231', '陈礼孝', '87.50', '01:21:01'],
        ['17', '⇩', '计技中221', '卢永华', '87.50', '01:58:08'],
        ['18', '⇩', '大数据232', '王恩婷', '50', '00:03:43'],
        ['19', '⇪', '软件231', '李文慧', '50', '00:04:03'],
        ['20', '⇩', ' 软件 242', ' 唐博鸿 ', '50', '00:11:30'],
        ['21', '⇩', ' 软件 231', ' 宁馨怡 ', '50', '00:12:48'],
        ['22', '⇪', '软件231', '黄小慧', '50', '00:22:35'],
        ['23', '⇪', '软件231', '蓝如意', '50', '00:28:40'],
        ['24', '⇪', '软件231', '梁丽媛', '50', '00:30:49'],
        ['25', '⇩', '计技中221', '陆明锐', '50', '01:02:40'],
        ['26', '⌀', '计技中221', '吴成锫', '50', '01:06:45'],
        ['27', '⇪', '技计中221', '罗志斌', '50', '01:08:50'],
        ['28', '⇪', ' 软件 242', ' 桂瑞杰 ', '20', '00:41:41']
    ];
</script>
<!--数据*/*/*/*￥#&2-->
<script type="text/javascript">
    name_num = num;
    const labelElement = document.querySelector('.title label');
    if (labelElement) {
        labelElement.textContent += name_num;
    }
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxbott'));
    option = {
        color: ['#00f1fc', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 20,
            right: 20,
            top: 0,
            bottom: 20
        },
        legend: {
            top: 2,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: left2
        },
        series: [{
            name: '饼图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: left2,
            // data: [
            //     {
            //         value: 21,
            //         name: 'A'
            //     },
            //     {
            //         value: 18,
            //         name: 'B'
            //     },
            //     {
            //         value: 15,
            //         name: 'C'
            //     },
            //     {
            //         value: 10,
            //         name: 'D'
            //     },
            //     {
            //         value: 3,
            //         name: 'E'
            //     },
            //     {value: 2, name: 'F'},
            //     {value: 1, name: 'G'}
            //
            // ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                show: true,
                formatter: '{b} : {c} ({d}%)'
            },
        }]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('pumiddboxtbott1'));
    option = {
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 60,
            right: 60,
            top: 70,
            bottom: 40
        },
        toolbox: {
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            top: 10,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: ['上周提交', '本周提交', '增速']
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },

            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
            axisPointer: {
                type: 'shadow'
            }
        }],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max: 40,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '',
                max: 20,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    formatter: '{value} 个'
                }
            }
        ],
        series: [

            {
                name: '上周提交',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#b266ff'
                            },
                                {
                                    offset: 1,
                                    color: '#121b87'
                                }
                            ]
                        )
                    }
                },
                data: left3_data1,
                label: {
                    show: true,
                    position: 'top',
                    color: '#b266ff'
                },
            },
            {
                name: '本周提交',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00f0ff'
                            },
                                {
                                    offset: 1,
                                    color: '#032a72'
                                }
                            ]
                        )
                    }
                },
                // #00effe
                data: left3_data2,
                label: {
                    show: true,
                    position: 'top',
                    color: '#00effe'
                },
            },
            {
                name: '增速',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fffb34'
                            },
                                {
                                    offset: 1,
                                    color: '#fffb34'
                                }
                            ]
                        )
                    }
                },
                yAxisIndex: 1,
                data: left3_data3,
                label: {
                    show: true,
                    position: 'top',
                    color: '#fffb34'
                },
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart_1'));
    option = {
        // 单位
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}分"
        },
        legend: {
            x: 'center',
            y: '15%',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', '石家庄', '唐山'],
            icon: 'circle',
            textStyle: {
                color: '#fff',
            }
        },
        calculable: true,
        series: [{
            name: '',
            type: 'pie',
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [41, 100.75],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ['50%', '40%'],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: 'area',
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: '{c}分'
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length2: 1,
                },
                emphasis: {
                    show: true
                }
            },
            data: center1
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
<script type="text/javascript">
    // 获取表格元素
    const table = document.getElementById('myTable');

    // 定义表头（已经在HTML中存在thead部分，这里只是模拟解析表头列信息，实际可不做这步，直接使用已有thead结构）
    const headers = ["排", "班级", "姓名", "牛客名称", "牛客id", "名次", "学校", "AC", "总分", "时间"];

    // 数据部分，这里是示例数据，你可以替换成实际获取数据的方式（比如从接口获取等）
    const data = center2;

    // 创建tbody元素
    const tbody = document.createElement('tbody');

    // 遍历数据数组，为每一条数据创建一行tr元素，并填充td元素（对应每列数据）
    data.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
            const cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        tbody.appendChild(row);
    });

    // 将tbody添加到表格中
    table.appendChild(tbody);
</script>
<script type="text/javascript">
    // 获取表格元素
    const table3 = document.getElementById('myTable_yidong');

    // 定义表头数据
    const tableHeaderData = ['排名', '班级', '姓名', 'ac数', '总分']; // 根据需要更改表头文本

    // 创建thead元素
    const thead3 = document.createElement('thead');

    // 创建表头行
    const headerRow = document.createElement('tr');

    // 根据表头数据创建th元素并添加到表头行
    tableHeaderData.forEach(headerText => {
        const headerCell = document.createElement('th');
        headerCell.textContent = headerText;
        headerRow.appendChild(headerCell);
    });

    // 将表头行添加到thead元素
    thead3.appendChild(headerRow);

    // 将thead添加到表格中
    table3.appendChild(thead3);

    // 定义一个列表来存储表格数据，每一项对应表格中的一行数据
    tableDataList3 = center2_yidong;

    // 创建tbody元素
    const tbody3 = document.createElement('tbody');

    // 遍历数据数组，为每一条数据创建一行tr元素，并填充td元素（对应每列数据）
    tableDataList3.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
            const cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        tbody3.appendChild(row);
    });

    // 设置tbody的宽度为100%
    tbody3.style.width = '8000px'; // 注意：这行代码可能不会改变任何可见效果，因为tbody的宽度通常由其内容决定

    // 将tbody添加到表格中
    table3.appendChild(tbody3);
</script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxtop'));
    option = {
        color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 10,
            right: 40,
            top: 0,
            bottom: 0,
            containLabel: true
        },
        calculable: true,
        series: [

            {
                name: '面积模式',
                type: 'pie',
                radius: [10, 70],
                center: ['50%', '50%'],
                roseType: 'area',
                data: right1,
                label: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)'
                },
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('purightboxmidd'));
    option = {
        color: ['#7de494', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',

        grid: {
            left: 30,
            right: 40,
            top: 30,
            bottom: 20,
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            data: right2_data1
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)",
                formatter: '{value} 人'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function (params) {
                var result = params[0].name + '<br/>';
                params.forEach(function (item) {
                    result += item.seriesName + ' : ' + item.value + '人<br/>';
                });
                return result;
            }
        },
        series: [{
            name: '',
            type: 'line',
            stack: '',
            areaStyle: {
                normal: {}
            },
            data: right2_data2,
            label: {
                show: true,
            }
        }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    // 获取表格元素
    const table2 = document.getElementById('myTable2');
    // 定义一个列表来存储表格数据，每一项对应表格中的一行数据
    // const tableDataList2 = window.center2;
    tableDataList2 = right3;
    // 创建tbody元素
    const tbody2 = document.createElement('tbody');

    // 遍历数据数组，为每一条数据创建一行tr元素，并填充td元素（对应每列数据）
    tableDataList2.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
            const cell = document.createElement('td');
            cell.textContent = cellData;
            row.appendChild(cell);
        });
        tbody2.appendChild(row);
    });

    // 将tbody添加到表格中
    table2.appendChild(tbody2);

</script>